/**
* 非收派订单输入
*/

<template>
  <div style="float:left; width:100%;min-width:1250px;">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>非收派订单输入</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主页内容 -->
    <!-- 订单类型 -->
    <div style="margin-left:300px">
      <h5 class="titleStyle">技能要求:</h5>
      <el-form :model="noTypicalForm1" :rules="rules" label-width="100px" ref="noTypicalForm1">
        <!--        <el-form-item label="订单类型">
                 <el-select v-model="noTypicalForm1.orderType" placeholder="请选择订单类型" style="width:200px;">
                   <el-option
                     v-for="item in noTypicalForm1.orderOptions"
                     :key="item.orderType"
                     :label="item.label"
                     :value="item.orderType"
                   ></el-option>
                 </el-select>
               </el-form-item> -->
        <el-form-item label="技能要求" prop="skillsRequ">
          <el-select
            :multiple="multipleType"
            :multiple-limit="multipleLimitNum"
            placeholder="请选择需要的技能要求"
            style="width:470px;"
            v-model="noTypicalForm1.skillsRequ"
          >
            <el-option
              :key="item.skillsRequ"
              :label="item.label"
              :value="item.skillsRequ"
              v-for="item in noTypicalForm1.skillOptions"
            ></el-option>
          </el-select>
        </el-form-item>

        <!-- 客户信息 -->
        <h5 class="titleStyle">客户信息:</h5>
        <el-form :inline="true" :model="noTypicalForm2" :rules="rules" ref="noTypicalForm2">
          <el-form-item label="姓名:" label-width="100px" prop="senderName">
            <el-input
              @blur="BlurName($event)"
              maxlength="15"
              placeholder="请输入姓名"
              show-word-limit
              style="width:150px;"
              type="text"
              v-model.trim="noTypicalForm2.senderName"
            ></el-input>
          </el-form-item>
          <el-form-item label="电话:" prop="senderMobile">
            <el-input
              @blur="BlurText($event)"
              maxlength="11"
              placeholder="请输入电话"
              show-word-limit
              style="width:250px;"
              type="text"
              v-model.trim="noTypicalForm2.senderMobile"
            ></el-input>
          </el-form-item>
          <el-form-item label="省市区:" prop="senderArea">
            <el-cascader
              :options="cityOptions"
              :separator="' '"
              @change="cityHandleChange"
              style="width:250px;"
              v-model="noTypicalForm2.senderArea"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <el-form-item label="详细地址:" prop="senderAddr">
          <el-input
            @blur="BlurAddress($event)"
            maxlength="50"
            placeholder="请输入详细地址"
            show-word-limit
            style="width:470px;"
            type="textarea"
            v-model.trim="noTypicalForm1.senderAddr"
          ></el-input>
        </el-form-item>

        <!-- 服务信息 -->
        <h5 class="titleStyle">服务信息:</h5>
        <el-form-item label="预约时间:" prop="beginTime">
          <el-date-picker
            :picker-options="pickerOptions"
            placeholder="选择日期时间"
            type="datetime"
            v-model="noTypicalForm1.beginTime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间:" prop="endTime">
          <el-date-picker
            :picker-options="pickerOptions"
            placeholder="选择日期时间"
            type="datetime"
            v-model="noTypicalForm1.endTime"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="用工类型:">
          <el-select
            placeholder="请选择用工类型"
            style="width:220px;"
            v-model="noTypicalForm1.employmentType"
          >
            <el-option
              :key="item.employmentType"
              :label="item.label"
              :value="item.employmentType"
              v-for="item in noTypicalForm1.workTypeOptions"
            ></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-button @click="onSubmit" style="margin-left:400px; float:left;" type="primary">查看匹配结果</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
    import {userList} from "../../api/userMG";
    import options from "../../utils/country-level3-data";

    export default {
        data() {
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 8.64e7 * 29;
                    }
                },
                timeLeagal: false, //输入时间是否合法
                phoneNumberLegal: false, //电话格式是否合法
                nameLeagal: false, //输入名字是否合法
                addressLeagal: false, //输入详细地址是否合法
                multipleType: true, //技能选择框可以多选
                multipleLimitNum: 5, //技能栏多选框最多选择个数：5
                cityOptions: options, //省市区三级数据
                noTypicalForm1: {
                    orderType: "非收派订单", //订单类型
                    skillsRequ: "", //技能要求，array
                    senderAddr: "", //详细地址
                    beginTime: "", //预约服务开始时间
                    endTime: "", //预约服务结束时间
                    employmentType: "全日制", //工作类型，默认全日制
                    orderOptions: [
                        {
                            orderType: "1902",
                            label: "非收件业务"
                        }
                    ],
                    skillOptions: [
                        {
                            skillsRequ: "1419",
                            label: "奥萃DHC商品盘点"
                        },
                        {
                            skillsRequ: "1407",
                            label: "按摩椅安装"
                        },
                        {
                            skillsRequ: "1402",
                            label: "按摩椅安装兜底"
                        },
                        {
                            skillsRequ: "1405",
                            label: "百度千斛"
                        },
                        {
                            skillsRequ: "1410",
                            label: "百度千斛1"
                        },
                        {
                            skillsRequ: "1406",
                            label: "车险查勘取证"
                        },
                        {
                            skillsRequ: "1413",
                            label: "丰创试点"
                        },
                        {
                            skillsRequ: "1420",
                            label: "惠达陶瓷门店巡查"
                        },
                        {
                            skillsRequ: "1422",
                            label: "恒源祥门店采集"
                        },
                        {
                            skillsRequ: "1409",
                            label: "劲霸采集"
                        },
                        {
                            skillsRequ: "1411",
                            label: "柯润补货"
                        },
                        {
                            skillsRequ: "1403",
                            label: "乐凯撒业务"
                        },
                        {
                            skillsRequ: "1415",
                            label: "绿源门店巡查"
                        },
                        {
                            skillsRequ: "1418",
                            label: "酒品稽查运输"
                        },
                        {
                            skillsRequ: "1414",
                            label: "师父认证"
                        },
                        {
                            skillsRequ: "1416",
                            label: "SY商超信息采集"
                        },
                        {
                            skillsRequ: "1421",
                            label: "十月天使门店巡查"
                        },
                        {
                            skillsRequ: "1401",
                            label: "vivo信息采集"
                        },
                        {
                            skillsRequ: "1412",
                            label: "网点稽查"
                        },
                        {
                            skillsRequ: "1408",
                            label: "信息采集通用"
                        },
                        {
                            skillsRequ: "1417",
                            label: "银联标识商店巡查（大连）"
                        },
                        {
                            skillsRequ: "1423",
                            label: "易点租客户合同打印采集"
                        },
                        {
                            skillsRequ: "1005",
                            label: "金牌销售"
                        },
                        {
                            skillsRequ: "1004",
                            label: "银牌销售"
                        },
                        {
                            skillsRequ: "1003",
                            label: "铜牌销售"
                        }
                    ],
                    workTypeOptions: [
                        {
                            employmentType: "全日制",
                            label: "全日制"
                        },
                        {
                            employmentType: "非全日制",
                            label: "非全日制"
                        }
                    ]
                },
                noTypicalForm2: {
                    senderName: "", //姓名
                    senderMobile: "", //电话
                    senderArea: ["中国", "广东省", "深圳市", "南山区"] //省市区
                },
                rules: {
                    skillsRequ: [
                        {
                            required: true,
                            message: "非收派订单必须要求技能!",
                            trigger: "change" //这个change很重要，改变值，失去焦点都会触发，适用下拉框
                        }
                    ],
                    senderAddr: [
                        {required: true, message: "详细地址不能为空!", trigger: "blur"}
                    ],
                    beginTime: [
                        {required: true, message: "开始时间必填!", trigger: "blur"}
                    ],
                    endTime: [
                        {required: true, message: "结束时间必填!", trigger: "blur"}
                    ],
                    senderName: [{required: true, message: "姓名必填!", trigger: "blur"}],
                    senderMobile: [
                        {required: true, message: "电话必填!", trigger: "blur"}
                    ],
                    senderArea: [
                        {required: true, message: "省市区必填!", trigger: "blur"}
                    ]
                }
            };
        },

        methods: {
            cityHandleChange(value) {
                console.log(value);
            },

            //检查电话输入是否是纯自然数
            BlurText(e) {
                let boolean = new RegExp("^[0-9][0-9]*$").test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入正确的电话!");
                    this.phoneNumberLegal = false;
                    e.target.value = "";
                } else {
                    this.phoneNumberLegal = true;
                }
            },

            //检查输入的姓名是否有问题
            BlurName(e) {
                let boolean = new RegExp(
                    "^[\u4E00-\u9FA5A-Za-z][\u4E00-\u9FA5A-Za-z]*$"
                ).test(e.target.value);
                if (!boolean) {
                    this.$message.warning("请输入合法的姓名!");
                    this.nameLeagal = false;
                    e.target.value = "";
                } else {
                    this.nameLeagal = true;
                }
            },

            //检查详细地址输入是否合规
            BlurAddress(e) {
                let boolean = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$").test(
                    e.target.value
                );
                if (!boolean) {
                    this.$message.warning("请输入合法的地址!");
                    this.addressLeagal = false;
                } else {
                    this.addressLeagal = true;
                }
            },

            //下面的函数验证时间的正确性
            timeVerification() {
                var orderBeginTimeStr = this.noTypicalForm1.beginTime.toString();
                orderBeginTimeStr = orderBeginTimeStr.replace("/-/g", "/");
                var orderBeginTime = new Date(orderBeginTimeStr).getTime();

                var orderEndTimeStr = this.noTypicalForm1.endTime.toString();
                orderEndTimeStr = orderEndTimeStr.replace("/-/g," / "");
                var orderEndTime = new Date(orderEndTimeStr).getTime();

                if (orderBeginTime + 1000 * 15 <= new Date().getTime()) {
                    alert("预定时间不能小于当前时间!");
                    console.log("时间error1");
                    this.timeLeagal = false;
                    return;
                } else if (orderEndTime <= orderBeginTime) {
                    alert("预定时间不能大于结束时间!");
                    console.log("时间error2");
                    this.timeLeagal = false;
                    return;
                } else {
                    this.timeLeagal = true;
                }
            },
            //提交查看匹配结果按钮
            onSubmit() {
                //测试输出
                console.log(this.noTypicalForm1.beginTime);
                //1.检查输入格式
                this.$refs["noTypicalForm1"].validate(valid => {
                    if (valid) {
                        this.$refs["noTypicalForm2"].validate(valid => {
                            if (valid) {
                                this.timeVerification();
                                if (
                                    this.timeLeagal &&
                                    this.phoneNumberLegal &&
                                    this.nameLeagal &&
                                    this.addressLeagal
                                ) {
                                    console.log("test");
                                    console.log(this.noTypicalForm2.senderName);
                                    //alert("提交成功");
                                    //**
                                    //此处填写网络请求操作
                                    //**
                                    //2.提交数据并检查返回结果
                                    //3.如果返回结果正常则准备跳转（可能需要保留状态）

                                    var skillsRequString = "";
                                    for (var i in this.noTypicalForm1.skillsRequ) {
                                        skillsRequString += this.noTypicalForm1.skillsRequ[i] + ",";
                                    }
                                    console.log(skillsRequString);
                                    //localStorage.clear();
                                    let Atypical = {
                                        orderType: "1902",
                                        skillsRequ: skillsRequString,
                                        senderName: this.noTypicalForm2.senderName,
                                        senderMobile: this.noTypicalForm2.senderMobile,
                                        senderArea: this.noTypicalForm2.senderArea[3],
                                        //category:this.typicalForm4.category,
                                        //weight:this.typicalForm4.weight,
                                        //value:this.typicalForm4.value,
                                        senderProvince: this.noTypicalForm2.senderArea[1],
                                        senderCityName: this.noTypicalForm2.senderArea[2],
                                        pickupAppointTime:
                                            this.noTypicalForm1.beginTime +
                                            "至" +
                                            this.noTypicalForm1.endTime,
                                        orderTime: this.noTypicalForm1.beginTime,
                                        senderAddr: this.noTypicalForm1.senderAddr,
                                        employmentType: this.noTypicalForm1.employmentType
                                    };
                                    userList(Atypical).then(res => {
                                        if (res.status != 0) {
                                            alert("提交成功,但匹配无结果!");
                                        } else {
                                            alert("提交成功,正在为您匹配小哥!");
                                            localStorage.setItem('order', JSON.stringify(Atypical));
                                            localStorage.setItem(
                                                "Receiving",
                                                JSON.stringify(res.data.resultResList)
                                            );
                                            localStorage.setItem('userOrderVo', JSON.stringify(res.data.userOrderVo));
                                            this.$router.push({
                                                path: "/system/MatchingResult",
                                                query: {orderType: "1"}
                                            });
                                        }
                                    });
                                    //4.跳转
                                } else {
                                    console.log("输入有错误");
                                    alert("输入错误!");
                                }
                            } else {
                                console.log("error submit2!!");
                                alert("form2 Error");
                                return false;
                            }
                        });
                    } else {
                        console.log("error submit1!!");
                        alert("form1 Error");
                        return false;
                    }
                });
            }
        }
    };
</script>

<style>
  .titleStyle {
    margin-left: 10px;
  }
</style>


